<?php $this->load->module('mobile/index/header', $common); ?>

<!-- 日历插件-->
<link rel="stylesheet" type="text/css"
      href="<?php echo URLPRE; ?>static/template/<?php echo MOBILE_TEMPLATE_NAME ?>/mobile/mobiscroll/css/mobiscroll.css"/>


<script type="text/javascript"
        src="<?php echo URLPRE; ?>static/template/<?php echo MOBILE_TEMPLATE_NAME ?>/mobile/mobiscroll/js/mobiscroll.js"></script>


<style>

    .global{background: inherit;}
    .order-head-wrap{background: #099fde;color: #808080;margin-bottom: 0;}
    .order-head-wrap .in-head{
        font-size: .9rem;
        background-color: #fff;
        border-radius: .2rem;
        border-bottom: 2px solid #0c88ba;
        margin-bottom: .5rem;
        padding: 0.5rem;
        line-height: 1.25;

    }
    .order-head-wrap .in-bottom{
        background-color: #0987bb;
        border-radius: 0.2rem;
        padding: 0.5rem;

        font-size: .8rem;
        color: #fff;
    }
    .order-head-wrap .in-ul-list li:first-child{font-weight: bold;color: #686868;font-size: 1rem;}
    .order-head-wrap .in-ul-list li{

        border-bottom: 1px dashed #ccc;
        padding-bottom: .4rem;
        margin-bottom: .5rem;
    }

    .notice-tips-wrap{background-color: #ecf5f8;
        padding: 0.3rem 0.5rem;
        font-size: .9rem;
        color: #26aaf3;
        text-align: center;
        border-bottom: 1px solid #c5e3ef;
        position: relative;
        bottom: -0.05rem;}




    .order-main-wrap{background: #fff;}
    .order-main-wrap .order-item {

        border-bottom: 1px solid rgba(221, 221, 221, 0.61);
        padding-right: 0.75rem;
        margin-left: 0.75rem;
        margin-bottom: 5px;
        line-height: 3rem;
        height: 3rem;
    }


    .order-main-wrap .order-item dt{


        color: #808080;
        font-size:.9rem ;
    }

    .order-main-wrap .order-item input{color:#2b2b2b;}
    .order-main-wrap .order-btn-icon{
        height: 3rem;
        line-height:  3rem;
        display: block;
        
        margin: 0 auto;
        }
    .order-main-wrap .order-btn-icon .ipt-numbers{

        vertical-align: middle;
        width:2.5rem;
        height:2rem;
        line-height: 2rem;
        text-align:center;   color:#005bb5; outline:0;
        border:1px solid #a6a6a6;
        margin: 0 0 .5rem 0 ;
        border-radius: 5px;
    }
    .order-main-wrap .order-btn-icon i{
        font-size: 1.9rem;
        line-height: 3rem;
        color: #26aaf3;
    }

    .order-main-wrap .order-btn-icon i:active{
        color:#005bb5;
    }

</style>

<!-- 日历插件-->

<div class="container">

    <div class=" conlist order-head-wrap">

        <div class="in-head">
            <ul class="in-ul-list">
            <li><?php echo $company ?></li>


            <li>单价：<span class="font-orange ">¥<span
                        id="price"><?php echo $book_unit_price; ?>
                        / 人 / 天</span></li>

                <li>
                    天数：
                    <span id="sDays" class="font-orange ">1 天</span>
                    &nbsp;&nbsp;人数：
                    <span id="sNum" class="font-orange "> 6 人</span>
                </li>

                <li>
                    订单总额：<span class="font-orange ">¥<span
                            id="price"><?php echo $book_unit_price; ?></span>
                </span> x <span id="head_num" class="font-orange"></span> x
                    <span id="day_num" class="font-orange">1</span> =
                    <span class="font-orange">¥</span><span
                        class="current_price font-orange js-total-price"></span>
                </li>
            </ul>

        </div>
        <div class="in-bottom">预定说明:
            <?php echo $book_notice; ?>
        </div>

    </div>

<div class="notice-tips-wrap">仅需2分钟即可轻松完成预订</div>

    <div class="order-main-wrap">
    <div class="order-item">
        <dl class="in-item fn-clear">
            <dt>入住日期</dt>
            <dd>
                <span class="writeok">
                <input type="text" class="in-input"
                       value="<?php echo date('Y-m-d'); ?>" id="start_date"
                       name="start_date" readonly>
                </span>
            </dd>
        </dl>
    </div>

    <div class="order-item">
        <dl class="in-item fn-clear">
            <dt>离店日期</dt>
            <dd>
                <span class="writeok">
                <input type="text" class="in-input"
                       value="<?php echo date('Y-m-d', strtotime("+1 day")); ?>"
                       id="end_date" name="end_date" readonly>
                </span>
            </dd>
        </dl>
    </div>
    <div class="order-item">
        <dl class="in-item fn-clear">
            <dt>男</dt>
            <dd class="order-btn-icon">
                <span class="min_order"><i class="fa fa-minus-square"></i> </span>
                <input type="number" class="ipt-numbers notice input_num"
                       maxlength="3" value="3"  id="input_male_num"
                       name="male_num">
                <span class="plus_order"><i class="fa fa-plus-square"></i></span>
            </dd>
        </dl>
    </div>
    <div class="order-item">
        <dl class="in-item fn-clear">
            <dt>女</dt>
            <dd class="order-btn-icon">
                <span class="min_order"><i class="fa fa-minus-square"></i> </span>
                <input type="number" class="ipt-numbers notice input_num"
                       maxlength="3" value="3" id="input_woman_num"
                       name="woman_num">
                <span class="plus_order"><i class="fa fa-plus-square"></i></span>
            </dd>
        </dl>
    </div>

        <div class="order-item">
            <dl class="in-item fn-clear">
                <dt>儿童</dt>
                <dd class="order-btn-icon">
                    <span class="min_order"><i class="fa fa-minus-square"></i> </span>
                    <input type="number" class="ipt-numbers notice input_num"
                           maxlength="0" value="0" id="input_child_number"
                           name="child_number">
                    <span class="plus_order"><i class="fa fa-plus-square"></i></span>
                </dd>
            </dl>
        </div>



    <div class="order-item">
        <dl class="in-item fn-clear">
            <dt>联系人</dt>
            <dd>
                <input type="text" class="in-input"  name="name" placeholder="请填写联系人姓名"
                       value="<?php echo $info['realname'] ?>" class="writeok">
            </dd>
        </dl>
    </div>
    <div class="order-item">
        <dl class="in-item fn-clear borderTop">
            <dt>手机号</dt>
            <dd>
                <input type="tel" class="in-input" name="phone" maxlength="11"
                       placeholder="请填写联系人手机号码"
                       value="<?php echo $info['mobile'] ?>" class="writeok">
            </dd>
        </dl>
    </div>
    <div class="order-item">
        <dl class="in-item fn-clear borderTop">
            <dt>订单备注</dt>
            <dd>
                <input type="text" class="in-input" name="note"
                       placeholder="请填写订单备注"  class="writeok">
            </dd>
        </dl>
    </div>

    </div>

</div>
<style>
    .order-bottom-wrap{height: 3rem; line-height:3rem;width: 100%;padding:0 10px;margin-top: 1rem;background-color:#fff;
        color: #ff7d13;
        font-size: .9rem;
    }
    .order-bottom-wrap .pay-text-wrap{float: right;}
    .order-bottom-wrap .pay-text-wrap i{font-size: .7rem;font-style: normal;padding: 0 1px;}
    .order-bottom-wrap .pay-text-wrap span{font-size: 1.3rem;font-weight: bold;padding: 0 5px;}
</style>
<section class="order-bottom-wrap">
    <div class="pay-text-wrap">总额: <i>¥</i><span class="js-total-price"></span></div>
</section>
<div class="col_div">
    <a href="javascript:void(0);" class="btn btn-orange btn_submit" title="提交订单">提交订单</a>
</div>


<?php $this->load->module('mobile/index/footer'); ?>


<script id="from-content" type="text/x-jquery-tmpl">

      <article  class="com-from-wrap">
        <section><label>姓名</label><input type="text" name="realname" placeholder="请输入姓名"></section>
        <section><label>手机号</label><input type="number" name="mobile" placeholder="请输入手机号"></section>
    </article>
    <div class="com-button-wrap">
        <a href="javascript:void(0);" class="js-submit btn" title="修改">确定</a>
    </div>


</script>

<script type="text/javascript">


    $(function () {

        $.extend({
            'calculate_order': function () {

                var woman_num = $('#input_woman_num').val();
                var male_num = $('#input_male_num').val();
                var child_num = $('#input_child_number').val();
                var total_num = parseInt(woman_num) + parseInt(male_num) +  parseInt(child_num);

                var s = new Date($('#start_date').val()), e = new Date($('#end_date').val());

                var days = parseInt(Math.abs(s - e) / 1000 / 60 / 60 / 24);


                $('#head_num').text(total_num);
                $('#sNum').text(total_num+'人');
                var unit_price = parseInt($('#price').text());
                var total_price = total_num * unit_price * days;
                $('.js-total-price').text(total_price);

            }
        })
        $.calculate_order();





        $.extend({
            'order_check_num': function () {

                var woman_num = $('#input_woman_num').val();
                var male_num = $('#input_male_num').val();
                if (parseInt(woman_num) + parseInt(male_num) >= 1) return true;
                return false;
            }
        })

        $.extend({
            'cal_days': function () {

                var s = new Date($('#start_date').val()), e = new Date($('#end_date').val());

                var days = parseInt(Math.abs(s - e) / 1000 / 60 / 60 / 24);


                if (days > 0) $('#sDays').text(days + '天');
                if (days > 0) $('#day_num').text(days);
                return days;
            }
        })


         //  日历切换


        $('#start_date').change(function () {

            var date = $(this).val();
            var month = '';
            var day = '';
            d = new Date(date);
            d = +d + 1000 * 60 * 60 * 24;
            d = new Date(d);

            month = d.getMonth();

            day = d.getDate();


            if ((d.getMonth() + 1).toString().length == 2) {
                month = (d.getMonth() + 1);
            } else {
                month = '0' + (d.getMonth() + 1);
            }

            if (d.getDate().toString().length == 2) {
                day = d.getDate();
            } else {
                day = '0' + (d.getDate());
            }

            var newdate = d.getFullYear() + "-" + month + "-" + day;

            $('#end_date').val(newdate);

            $('#end_date').mobiscroll().date({
                theme: 'mobiscroll',
                lang: 'zh',
                display: 'center',
                dateFormat: 'yyyy-mm-dd',
                min: new Date(d.getFullYear(), d.getMonth(), d.getDate()),
                max: new Date(2022, 12, 31)
            });

            $.cal_days();
            $.calculate_order();
        })


        $('#end_date').change(function () {
            $.cal_days();
            $.calculate_order();
        })
        $('#start_date').mobiscroll().date({
            theme: 'mobiscroll',
            lang: 'zh',
            display: 'center',
            dateFormat: 'yyyy-mm-dd',
            min: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
            max: new Date(2022, 12, 31)
        });

        $('#end_date').mobiscroll().date({
            theme: 'mobiscroll',
            lang: 'zh',
            display: 'center',
            dateFormat: 'yyyy-mm-dd',
            min: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 1),
            max: new Date(2022, 12, 31)
        });


        //  修改人数

        $('.input_num').change(function () {

            var value = parseInt($(this).val());

            if ($.order_check_num()) {
                $(this).val(value);
            } else {
                $(this).val(1);
                alert_popup('总人数至少1人!');
            }
            $.calculate_order();

        })

        $('.min_order').click(function () {

            var $input_num = $(this).siblings('input');
            if ($input_num.val() === '') {
                return;
            }
            var num = parseInt($input_num.val());

            if ($.order_check_num()) {
                $input_num.val(--num);
            } else {
                alert_popup('人数至少1人!');
            }
            $.calculate_order();
        });


        $('.plus_order').click(function () {
            var $input_num = $(this).siblings('input');
            if ($input_num.val() === '') {
                return;
            }
            var num = parseInt($input_num.val());
            $input_num.val(++num);
            $.calculate_order();
        });


        var slid = $("#sliderimg").slider({
            loop: true
        });


        <?php if(!$check):?>
        layer.open({
            type: 1,
            title: '完善您的用户信息',
            skin: 'layui-layer-rim', //加上边框
            area: ['18rem', '12.5rem'], //宽高
            content: $('#from-content').html()
        });

        <?php endif;?>





        //  完善信息

        $('.js-submit').click(function () {


            if ($('input[name="realname"]').val().length == 0) {
                alert_popup('请输入姓名');
                return false;
            }

            if ($('input[name="mobile"]').val().length == 0) {
                alert_popup('请输入手机号');
                return false;
            } else {
                var $val = $("input[name='mobile']").val();
                var length = $val.length;
                var status = (length == 11 && /^(((17[0-9]{1})|(13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test($val));
                if (status == false) {
                    alert_popup('请正确填写您的手机号码');
                    return false;
                }
            }


            var mobile = $('input[name="mobile"]').val();

            var realname = $('input[name="realname"]').val();

            $.post('<?php echo $complete_url;?>', {
                realname: realname,
                mobile: mobile,
            }, function (data) {
                if (data.status == '1') {
                    window.location.reload();
                }
                alert_popup(data.info);
                return false;
            }, 'json')
        })


        // 订单表单提交

        $('.btn_submit').click(function () {
            if ($('input[name="start_date"]').val() == '0') {
                alert_popup('请选择入住日期');
                return false;
            }

            if ($('input[name="end_date"]').val() == '0') {
                alert_popup('请选择离店日期');
                return false;
            }


            if ($('input[name="name"]').val().length == 0) {
                alert_popup('请输入姓名');
                return false;
            }
            if ($('input[name="phone"]').val().length == 0) {
                alert_popup('请输入手机号');
                return false;
            } else {
                var $val = $("input[name='phone']").val();
                var length = $val.length;
                var status = (length == 11 && /^(((17[0-9]{1})|(13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test($val));
                if (status == false) {
                    alert_popup('请正确填写您的手机号码');
                    return false;
                }
            }


            var start_date = $('input[name="start_date"]').val();
            var end_date = $('input[name="end_date"]').val();
            var male_num = $('#input_male_num').val();
            var woman_num = $('#input_woman_num').val();
            var name = $('input[name="name"]').val();
            var phone = $('input[name="phone"]').val();
            var note = $('input[name="note"]').val();
            $.post('<?php echo $form_url;?>', {
                start_date: start_date,
                end_date: end_date,
                male_num: male_num,
                woman_num: woman_num,
                name: name,
                note: note,
                phone: phone
            }, function (data) {
                alert_popup(data.info);
                if (data.status == '1') {
                    setTimeout(function () {
                        window.location.href = '<?php echo site_url('mobile/order/hotel_list') ?>';
                    }, 1200);
                }
            }, 'json')

        });



    });

    function alert_popup(text) {
        $.dialog({
            style: 'tip',
            width: 200,
            closeTime: 1000,
            content: '<p style="text-align: center">' + text + '</p>'
        }).open();
    }


</script>


